<template>
<div>
  <div v-show="!islist" style="padding-top: 48px;float:left;" >
    <!-- <div style="background-color: #F7F7F7;width:100%;position:fixed;top:45px;z-index:50;line-height:3.5em;">
      <span style="margin-left:20px; width:40%;float:left;">设备名称</span>
      <span style="width:40%;float:left;">设备型号</span>
      <span style="width: 40pxfloat:left;">数量</span>
    </div>
    <x-table id="table" :cell-bordered="false"  style="margin-top: 30px;padding-bottom:150px;margin-bottom:20px;background-color:#fff;">
          <tr v-for='(item, index) in equipList' :key="index" @click="ChoseClick(index)">
            <td :class="{'ishave': item.count === 0}">{{item.name}}</td>
            <td :class="{'ishave': item.count === 0}">{{item.model}}</td>
            <td  :class="{'ishave': item.count === 0}" style="width: 40px">{{item.count}}</td>
          </tr>
    </x-table> 
    <x-button type="primary" @click.native="next">下一步</x-button>-->
    <span style="font-size:20px;color:#555;margin:5px;">选择要借用的设备</span>
    <div class="list"  v-for='(item, index) in equipList'  :key="index">
      <div @click="ChoseClick(index)" class="checkicon"></div>
      <div class="list-name">{{item.name}}</div>
      <div class="list-model" >{{item.model}}</div>
      <div class="list-count" >库存: {{item.count}}</div>
      <x-number class="select-num" :min="1" width="30px" :max="item.count" v-model='nums[index]'></x-number>
    </div>
    <div v-if="ismore" class="loadmore">
     <p @click.stop="loadmore" class="more"><span v-if="!isLoad">更多...</span><spinner v-else></spinner></p> 
    </div>  
    <divider style="margin-bottom: 90px;" v-else>我是有底线的</divider>
  </div>
    <applyequip :nums="number" v-show="islist"></applyequip>
    <div v-show="!islist" class="nextButton">
      <span style="font-size:16px;line-height:3em;margin-left:10%; color">已选择 <b><i style="color:#1AAD19;">{{selectEquip.length}}</i></b> 种设备</span>
      <x-button style="float:right;margin:5px 10px;width: 30%;height:inherit;/*background:#e6a23c;*/" :disabled="!isNext"  @click.native="next" type="primary">选择完成</x-button>
      <!-- <x-button v-else style="float:right;margin:5px 10px;width: 30%;height:inherit;/*background:#e6a23c;*/" type="primary">申请借用</x-button> -->
    </div>
</div>
</template>
<script>
import { XButton, Group, Divider, CheckIcon, InlineXNumber, XNumber, Spinner } from 'vux'
import { mapState } from 'vuex'
import applyequip from './applyequip'
export default {
  components: {
    CheckIcon,
    Spinner,
    applyequip,
    XButton,
    Group,
    InlineXNumber,
    Divider,
    XNumber
  },
  data () {
    return {
      equipList: [],
      number: [],
      selectEquip: [],
      nums: [],
      current: '',
      ismore: false,
      isLoad: false
    }
  },
  created () {
    this.$http.get('/api/items/device/allowMe').then((res) => {
      // console.log
      this.ismore = true
      this.current = res.data.content.current
      this.equipList = res.data.content.records.map((item) => {
        this.nums.push(1)
        return item
      })
    })
  },
  computed: {
    isselect () {
      return this.$router.path !== '/equipList'
    },
    ...mapState({
      islist: state => state.vux.islist,
      equiplist: state => state.vux.equiplist
    }),
    isNext () {
      return this.equiplist.length !== 0
    },
    n () {
      return this.equiplist.length
    }
  },
  methods: {
    loadmore () {
      this.current++
      this.isLoad = true
      this.$http.get('/api/items/device/allowMe?current=' + this.current).then((res) => {
        console.log(res, res.data.content.records.length > 0 && res.data.content.current > this.current)
        if (res.data.content.records.length > 0) {
          this.ismore = true
          res.data.content.records.map((item) => {
            this.equipList.push(item)
            this.nums.push(1)
          })
          this.isLoad = false
        } else {
          this.ismore = false
          this.isLoad = false
        }
      })
    },
    next () {
      if (this.equiplist.length !== 0) {
        // // this.$store.dispatch('svaeParams', true)
        // this.$store.dispatch('setnumber', this.number)
        // this.$store.dispatch('setlist', this.selectEquip)
        let selectedDeviceIds = ''
        this.selectEquip.forEach(element => {
          selectedDeviceIds += (selectedDeviceIds === '') ? element.id : ',' + element.id
          // selectedDeviceIds.push(element.id)
        })
        this.$router.push({path: '/applyequip', query: {selectedDeviceIds: selectedDeviceIds}})
      } else {
        alert('请选择设备')
      }
    },
    // 点击选择框触发
    ChoseClick (index) {
      // 获取list节点
      var node = document.getElementsByClassName('list')
      // 获取设备列表
      var a = this.equipList
      for (var i = 0; i < a.length; i++) {
        if (a[index].count !== 0) {
          if (this.selectEquip[i] === a[index]) {
            this.selectEquip.splice(i, 1)
            this.$store.dispatch('removeParams', i)
            // this.number.splice(i, 1)
            this.$store.dispatch('removenumber', i)
            node[index].childNodes[0].classList.remove('icon-span-select')
            break
          }
          if (index === i && this.selectEquip[i] !== a[index]) {
            node[index].childNodes[0].classList.add('icon-span-select')
            // this.number.push()
            this.$store.dispatch('svaeParams', a[index])
            this.$store.dispatch('setnumber', this.nums[index])
            this.selectEquip.push(a[index])
            break
          }
        } else {
          alert('该设备库存为0')
          break
        }
      }
    }
  }
}
</script>
<style  lang="less"  scoped>

@import '~vux/src/styles/close';
.addcolor{
  background-color: #ededed;
}

.equip {
  padding-bottom: 60px;
  padding-top: 40px;
}
.weui-dialog {
  position: fixed;
  z-index: 5000;
  width: 100%;
}
.dialog-demo {
  .dialog-title {
    line-height: 30px;
    color: #222;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .ishave {
    color: red !important;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 10px;
    max-width: 500px;
  }
  .demo1-item-selected {
    border: 1px solid green;
  }
}
.list > .weui-cell:before{
  border: none;
}
.list > .weui-cell{
  width: 45%;
  float: right;
  position: relative;
  margin: 0;
  padding: 0;
  margin-top: 10px;
}
.list{
  background: #fff;
  margin-top: 5px; 
  // padding: 5px 0 0 0;
  float: left;
  height:70px;
  width: 100%;
}
.checkicon{
  float: left;
  display: inline-block;
  background-color: #fff;
  border-radius: 100%;
  border: 1px solid #ccc;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 6% 5%;
  vertical-align: middle;
}
.checkicon::after{
  border: 2px solid transparent;
  border-left: 0;
  border-top: 0;
  content: " ";
  top: 3px;
  left: 6px;
  position: absolute;
  width: 4px;
  height: 8px;
  -webkit-transform: rotate(45deg) scale(0);
  transform: rotate(45deg) scale(0);
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
.icon-span-select{
  background-color: #1AAD19;
  border-color: #1AAD19;
}
.icon-span-select::after{
  border-color: #fff;
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
}
.nextButton{
  width: 100%;
  // height: 60px;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  float: left;
  border-top: 1px solid #ddd;
  z-index: 9999;
}
.loadmore{
  background: #fff;
  float: left;
  margin-bottom: 90px;
  width: 100%;
  border-top: 1px solid #eee;
}
.more{
  line-height: 2.5em;
  font-size: 14px;
  // border-right : 1px solid #eee;
  padding: 0 10px;
  // float: left;
}

.list-name {
    width: 250px;
    font-size: 18px;
    margin-top: 5px;
    float: left;
}

.list-model {
    width: 200px;
    top: 40px;
    color: rgb(170, 170, 170);
    left: 50px;
    margin-top: 5px;
    font-size: 14px;
    float: left;
    left: 50px;
}

.list-count {
    top: -25px;
    float: right;
    left: -10px;
    color: #aaa;
    margin: 0 20px;
    position: relative
}

.select-num {
    float: right;
    top: -36px;
    position: relative;
}

</style>
